10월 06, 2022
blogger | 벡터 웹폰트 아이콘 적용 방법
문장 구조가 복잡한 블로그 게시 글을 작성할 경우, 글자의 크기만으로 제목과 부제목을 일목요연하게 구분하기가 까다롭다. 제목 앞에 이미지를 넣을 수 있지만 복잡하고 모양새가 여의치 않아 현실성이 없다.
하지만 ‘머티리얼 아이콘’(Material Icon)과 ‘폰트 어썸’(Font Awesome) 및 ‘리믹스 아이콘’(Remix Icon) 을 이용하면 쉽게 문제를 해결할 수 있는데, 방법은 다음과 같다.
머티리얼 아이콘
Material Icon 사용은 구글의 막강하고 전능한 위력을 재차 실감 할 수 있다. 범용성과 편의성이 타의 추종을 불허하는 머티리얼 아이콘은 개인용 및 상업용 모두 무료로 제공되며, 저작권에 전혀 구애를 받지 않으나 판매를 해서는 안 된다.아이콘 종류 보기
블로그 템플릿 <head>와 </head>사이에 아래 코드를 삽입한다.
< link href='https://fonts.googleapis.com
/icon?family=Material+Icons' rel='stylesheet'/ >'html보기'로 게시글 페이지(포스트) 내용 작성 부분 다음에 아래처럼 스타일을 지정하고 아이콘의 크기, 색상 등의 속성을 정의하면 된다.
방법 1
<style>
.post-body h2:before{
content: 'face';
font-family: 'Material Icons';
color:blue;
font-size:25px;
vertical-align: top;
margin-right:5px;
}
</style>방법 2
<style>
.light:before{
content: 'light_mode';
font-family: 'Material Icons';
color:red;
font-size:25px;
vertical-align: top;
margin-right:5px;
}
</style>폰트 어썸
Font Awesome은 무료와 유료로 나누어진다. 버전별로 스크립트를 달리 링크 해야 하고 아이콘의 버전과 코드를 숙지하는 등 앞선 ‘머티리얼 아이콘’보다 다소 까다롭다.아이콘 종류 보기
블로그 템플릿 <head>와 </head>사이에 아래 코드를 삽입한다.
< link href='https://cdnjs.cloudflare.com
/ajax/libs/font-awesome/5.8.2/css/all.min.css' rel='stylesheet'/ >'html보기'로 게시글 페이지(포스트) 내용 작성 부분 다음에 아래처럼 스타일을 지정하고 아이콘의 크기, 색상 등의 속성을 정의한다.
방법 1
<style>
#star:before {
content: "\f005";
display: inline-block;
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 900;
margin: 0 10px;
}
</style>
세 번째 줄은 아이콘 종류(별) 네임 코드이며,
다섯 번째 줄은 아이콘 버전이며 반드시 세 번째 줄의 코드와 버전이 같아야 하고,
일곱 번째 줄은 아이콘의 선명도(굵기)이며 반드시 세 번째 줄과 다섯 번째 줄과 일치하도록 해야한다.
리믹스 아이콘
Remix Icon은 공개된 소스로, 개인용 및 상업용 모두 무료로 제공되며, 저작권에 전혀 구애를 받지 않고 자유자재로 사용할 수 있어 디자이너와 개발자들에게 더없이 유용하다. 폰트 어썸보다 세부적인 처리에 다소 떨어지는 단점은 간편한 로딩 방법과 무료인 점으로 보상할 수 있다.아이콘 종류 보기
블로그 템플릿 <head>와 </head>사이에 아래 코드를 삽입한다.
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/
fonts/remixicon.css" rel="stylesheet">코드 활용 예시
<i class="ri-admin-line ri-fw"></i>
<i class="ri-admin-line ri-xxs"></i>
<i class="ri-admin-line ri-xs"></i>
<i class="ri-admin-line ri-sm"></i>
<i class="ri-admin-line ri-1x"></i>
<i class="ri-admin-line ri-lg"></i>
<i class="ri-admin-line ri-xl"></i>
<i class="ri-admin-line ri-2x"></i>
<i class="ri-admin-line ri-3x"></i>
웹 폰트 적용하기
구글 폰트에서 제공하는 여러 가지 웹 폰트를 간단하게 바로 적용할 수 있다. 블로그 템플릿 html <head>와 </head>사이에
사용할 폰트체를 링크하면 된다. 기본 코드에서 빨간색의 폰트 종류만 바꾸면 된다. 구글 블로그 사용자는 편집기에서 바로 지정하면 된다.구글 폰트 종류 보기
<link href='https://fonts.googleapis.com/css?family=Dokdo' rel='stylesheet'/>
독도는 우리 땅
<link href='https://fonts.googleapis.com/css?family=Gamja Flower' rel='stylesheet'/>